<template>
    <Layout :style="{minHeight: '100vh'}">
      <header-nav></header-nav>

      <Layout>
        <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
          <Menu class="menu-wrapper" :active-name="cueMenuProps.activeName" theme="dark" width="auto" :class="menuitemClasses" :open-names="cueMenuProps.openNames" @on-select="goToPath">
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-analytics"></Icon>
                <span>Dashbord</span>
              </template>
              <MenuItem name="1-1">Dashbord</MenuItem>
            </Submenu>
            <Submenu name="2">
              <template slot="title">
                <Icon type="md-person"></Icon>
                <span>Account</span>
              </template>
              <MenuItem name="2-1">Account set</MenuItem>
            </Submenu>
            <Submenu name="3">
              <template slot="title">
                <Icon type="ios-paper"></Icon>
                <span>Supplier PO</span>
              </template>
              <MenuItem name="3-1">Wait to confirm</MenuItem>
              <MenuItem name="3-2">Confirmed</MenuItem>
              <MenuItem name="3-3">Wait to ship(WH)</MenuItem>
              <MenuItem name="3-4">Shipped</MenuItem>
            </Submenu>
          </Menu>
        </Sider>

        <Layout>
          <Content :style="{padding: '0 16px 16px'}">
            <Breadcrumb :style="{margin: '16px 0'}" class="bread-crumb">
              <BreadcrumbItem v-for="(path, index) in pathTitleArray" :key="index" :to="pathLinkArray[index]"><p class="bread-crumb-text">{{path.replace(/\-/g, ' ')}}</p></BreadcrumbItem>
            </Breadcrumb>
            <Card>
              <transition name="router-slid" mode="out-in">
                <router-view/>
              </transition>
            </Card>
          </Content>
        </Layout>

      </Layout>

    </Layout>
</template>

<script>
  import {mapState, mapMutations} from 'vuex';
  import HeaderNav from '@/components/HeaderNav';
  import { siderMenu } from '@/components/mixin';
  import { getUserInfo, getProductInfo } from '@/api/index';
  export default {
    name: 'Main',
    components: { HeaderNav },
    mixins: [ siderMenu ],
  	data () {
      return {
        isCollapsed: false,
        pathTitleArray: [],
        pathLinkArray: []
      };
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      },
      ...mapState([ 'cueMenuProps', 'routeSubPage'])
    },
    created () {
      this.routeOperateFunc(this.$route.path);
    },
    methods: {
    	routeOperateFunc (route) {
        /**
         * Init menu status
         */
        let curRoutePath = route;
        let curMenuSelected =this.curMenuSelected(curRoutePath);
        this.RECORD_CURMENU(curMenuSelected);
        this.pathTitleArray = []
        this.pathTitleArray = curRoutePath.split('/');
        this.pathTitleArray.splice(0, 1);
        let lastArrayItem = this.pathTitleArray[this.pathTitleArray.length -1];
        var hasQuery = lastArrayItem.indexOf('?') > 0;
        if (hasQuery) {
          let lastRouter = lastArrayItem.split('?')[0];
          this.pathTitleArray[this.pathTitleArray.length -1] = lastRouter;
        }
        /**
         * Init menu link
         */
        let link = '';
        this.pathLinkArray = [];
        let linkArray = curRoutePath.split('/');
        linkArray.splice(0, 1);
        linkArray.forEach((path) => {
          link += '/' + path;
          this.pathLinkArray.push(link)
        });
      }
    },
    watch: {
    	$route: function (path) {
        this.routeOperateFunc(path.fullPath);
      },
      routeSubPage: function () {
        this.routeOperateFunc(this.$route.path);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import '../../assets/sass/mixin';
  .layout-con{
    height: 100%;
    width: 100%;
  }
  .menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }
  .menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }
  .menu-item span {
    width: 100px;
    text-align: left;
    white-space: normal;
    vertical-align: middle;
  }
  .collapsed-menu span {
    width: 0px;
    height: 0px;
    transition: all .2s ease;
  }
  .collapsed-menu .ivu-menu-item{
    padding-left: 8px !important;
    text-align: center;
    transition: padding .2s ease;
  }
  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }
  .ivu-menu-item {
    padding-left: 55px !important;
    text-align: left;
    font-weight: bold;
  }
  .bread-crumb {
    text-align: left;
    .bread-crumb-text {
      display: inline-block;
      font-size: 16px;
      &:first-letter {
        text-transform: uppercase;
      }
    }
  }

</style>
